var button_next = document.querySelector(".button-next");
            var button_prev = document.querySelector(".button-prev");
            var wrapper = document.querySelector(".wrapper");
            var container = document.querySelector(".container-box");
            var index = 0 ; 
            function move( dom , attr , target ){
                var now = parseInt(getComputedStyle(dom)[attr]);
                clearInterval( dom.t );
                dom.t = setInterval( function(){
                      var speed = (target - now) / 10 ;
                      speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
                      if( Math.abs( target - now ) <= Math.abs(speed) ){
                            dom.style[attr] = target + "px";
                            clearInterval( dom.t );
                      }else{
                            now += speed;
                            dom.style[attr] = now + "px";
                      }
                } , 50 );
            }
            function handlerNextClick(){      
                  if( index === 4 ){      
                        index = 1; 
                        wrapper.style.left = 0 + "px";
                  }else{
                        index ++;
                  }
                  move( wrapper , "left" , -index * 794 );
            }     
            button_next.addEventListener( "click" , handlerNextClick );
            function autoPlay(){
                  autoPlay.t = setInterval( function(){
                        handlerNextClick()
                  } ,  2000)
            }     
            function stopPlay(){
                  clearInterval( autoPlay.t );
            }
            container.addEventListener( "mouseenter" , stopPlay )
            container.addEventListener( "mouseleave" , autoPlay )
            autoPlay();